import React, { useReducer, useEffect } from 'react'
const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_BANNER_LIST':
      return { ...state, bannerList: action.payload }
    case 'UPDATE_RECOMMEND_LIST':
      return { ...state, recommendList: action.payload }
    default:
      return state
  }
}
function App() {
  const [ state, dispatch ] = useReducer(reducer, {
    bannerList: [],
    recommendList: []
  })
  useEffect(() => {
    fetch('http://121.89.205.189/api/banner/list')
      .then(res => res.json())
      .then(res => {
        console.log(res)
        dispatch({
          type: 'UPDATE_BANNER_LIST',
          payload: res.data
        })
      })
    fetch('http://121.89.205.189/api/pro/recommendlist')
      .then(res => res.json())
      .then(res => {
        console.log(res)
        dispatch({
          type: 'UPDATE_RECOMMEND_LIST',
          payload: res.data
        })
      })
  }, [])
  return (
    <div>
      {
          state.bannerList && state.bannerList.map(item => (
            <img src={ item.img } alt="" key = { item.bannerid }/>
          ))
        }
      {
        state.recommendList && state.recommendList.map(item => (
          <div key={item.proid}>
            { item.proname }
          </div>
        ))
      }
    </div>
  )
}

export default App
